<template>
  <view class="basic bgDefault tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
	<tn-nav-bar  fixed>{{title}}</tn-nav-bar>
	<view class="index_content">
		<view class="search-box tn-pl-sm tn-pr-lg bottom-search" @click="search()">
				<text class="tn-icon-search icon"></text>
				<text class="tn-pl-sm" style="color: #c8c9cc;">{{searchParam.keyword||'搜索'}}</text>
			</view>
		
		<view class="tn-margin-top" >
			<view   class="mentor_list tn-margin-top-sm" v-for="(mentor,sIndex) in list" :key="sIndex" @tap="detail(mentor)">
				<view   class="logo" :style="{ backgroundImage: 'url(' + mentor.avatar + ');'}"></view>
				<view class="right">
					<view class="title">
						<span style="margin-right: 20rpx;">{{mentor.nickname}}</span>
						<span  v-for="label in mentor.labelsName" class="title-tag">{{label}}</span>
					</view>
					<view class="en">{{mentor.enname}}</view>
					
					<view class="list-tag">评分{{parseFloat(mentor.score).toFixed(1)}}</view>
					<view class="location">
						<i class="tn-icon-location icons"></i>
						距离 {{ mentor.distance.toFixed(2)|| "未知"}} KM 
					</view>
					<view class="footer mentor_footer">
						<view class="price">￥{{mentor.price}}</view>
						<view class="order-btn" @tap.stop="subBtn(mentor)">立即预约</view>
					</view>
				</view>
			</view>
			
			
			<view class="empty__item" v-if="list.length < 1 && !loading" style="margin-top: 200px;">
			  <tn-empty mode="search"></tn-empty>
			</view>
			<TemplateLoading :active="loading"></TemplateLoading>
		</view>
	</view>
	
	<tn-popup v-model="show" :borderRadius="20" :customStyle="customStyle" mode="bottom" height="1038rpx">
	      <view style="padding: 29rpx 7%;">
				<view class="tn-flex tn-flex-row-between tn-flex-col-center ">
				  <view class="justify-content-item">
				    <view class="tn-flex tn-flex-col-center tn-flex-row-left" @tap="turnUrl">
				      <!-- 图标logo -->
				      <view class="logo-pic tn-shadow" >
				        <view class="logo-image">
				          <view class="tn-shadow-blur" :style="{ backgroundImage: 'url(' + selectMentor.avatar + ');width: 100%;height: 100%;background-size: cover;' }" >
				          </view>
				        </view>
				      </view>
				      <view class="tn-padding-right tn-color-white">
				        <view class="tn-padding-right tn-padding-left-sm select_nickname">
				          {{selectMentor.nickname}}
				        </view>
				        <view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis idline select_intro">
							{{selectMentor.intro}}
						</view>
						
						<view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis idline tn-flex select_tag">
							<view class="rightTxt">
								<image class="rightImage" src="https://www.zztengma.com/lihu/bumang/images/menuRight.png"></image> 爽约包退
							</view>
							<view class="rightTxt">
								<image class="rightImage" src="https://www.zztengma.com/lihu/bumang/images/menuRight.png"></image> 实名认证
							</view>
							<view v-if="selectMentor.file" class="rightTxt">
								<image class="rightImage" src="https://www.zztengma.com/lihu/bumang/images/menuRight.png"></image> 资质证书
							</view>
						</view>
				      </view>
				      
				    </view>
				  </view>
				</view>
				
				<view class="pop_content">
					<view class="pop_content_user">
						<view class=" tn-flex " style="justify-content: space-between;">
							<image class="alogo"  mode="aspectFit" :src="selectMentor.avatar"></image>
							<view class="alogoRight">
								<view class="tn-flex " style="justify-content: space-between;">
									<view class="sprice">￥{{selectMentor.topics[selectTag].price}}</view>
									<view @tap="detail(selectMentor)">主理人详情 > </view>
								</view>
								<view class="">
									<span style="text-decoration-line: line-through;margin-right: ;">原价：￥{{selectMentor.topics[selectTag].price}}</span>
									<span class="">现价：￥{{selectMentor.topics[selectTag].price}}</span>
								</view>
								
								<view class="" style="font-size: 12px;" >已选：{{selectMentor.topics[selectTag].name}} | {{selectMentor.topics[selectTag].times}}分钟</view>
							</view>
						</view>
					</view>
					
					<view class="pop_content_topic">
						<tn-tag 
						backgroundColor="#e2e0e0"
						margin="0 26rpx 0 0"
						:fontColor="index==selectTag ? '#ff6708' :'#666'"
						:border="index==selectTag ? '1px solid #ff6708' :''"
						 v-for="(item,index) in selectMentor.topics" shape="circle"
						@tap="selectTopic(item,index)"
						>{{item.name}}</tn-tag>
					</view>
					
					<view class="buy tn-flex "  style="justify-content: space-between;margin-top: 31rpx;">
						<view style="font-size: 28rpx;line-height: 40px;">购买数量</view>
						<view>
							<changeNumber @forceNumber="forceNumber"></changeNumber>
						</view>
					</view>
					<view>
						<view>选择服务时间 <span style="color: #333;font-size: 12px;">({{order_date}})</span></view>
						<view>
							<long-date 
							    type="day" 
							    :openStatus="true" 
							    @select="getTime">
							</long-date>
						</view>
					</view>
				</view>
				
				<view class="footer tn-flex" style="justify-content: space-between;">
					<view>
						合计：<span class="sprice">￥{{total.toFixed(2)}}</span>
					</view>
					<view>
						<view class="btn" @tap="subOrder">确认下单</view>
					</view>
				</view>
			</view>
	</tn-popup>
		
	

  <view class="tn-padding-bottom-xs"></view>

  </view>
</template>

<script>
  import {listObj} from '@/api/mentor/index.js'
  import TemplateLoading from '../components/loading.vue'
  import {checkLogin} from '@/util/common.js'
  import changeNumber from '@/components/change-number/change-number.vue';
  import longDate from "@/components/long-date/long-date.vue"
  import {mentorOrder} from '@/api/order/order.js'
  
  export default {
    name: 'mentorIndex',
	components:{TemplateLoading},
	
    data() {
      return {
		loading:false,
		swiperHeight:146,
		list: [],
		selectMentor:{},
		searchParam:{
			cate_id:"",
			lat:"",
			lng:"",
			keyword:""
		},
		count:0,
		title:"主理人列表",
		selectTag:0,
		show:false,
		order_number:1,
		total:0,
		order_date:"请选择时间",
		customStyle:{},
      }
    },
	onLoad(e) {
		if(e.cate_id){
			this.searchParam.cate_id = e.cate_id
		}
		if(e.keyword){
			this.searchParam.keyword = e.keyword
		}
		
		this.initData()
	},

    methods: {
	  detail(item){
		uni.navigateTo({
		  url: '/pages/mentor/detail?id=' + item.id
		})
	  },
      getRandomCoolBg() {
        return this.$tn.color.getRandomCoolBgClass()
      },
	  search(){
		  uni.navigateTo({
		    url: '/pages/search/search?type=0'
		  })
	  },
	  subOrder(){
	  	if(this.order_date == "请选择时间" || this.order_date == ""){
	  		uni.showToast({
	  			icon:'none',
	  			title:"请选择服务时间"
	  		})
	  		
	  		return false;
	  	}
	  	
	  	var param = {
	  		mentor_id:this.selectMentor.id,
	  		mentor_topic_id:this.selectMentor.topics[this.selectTag].id,
	  		order_number:this.order_number,
	  		order_date:this.order_date,
	  		coupon_id:0
	  	}
	  	
	  	this.loading = true
	  	mentorOrder(param).then(res=>{
	  		this.loading = false
	  		uni.navigateTo({
	  		  url: '/pages/order/pay/pay?order_sn='+res.order_sn
	  		})
	  	}, err=>{
	  		this.loading = false
	  	})
	  },
	  getTime(val){
	  	console.log(val)
	  	this.order_date = val.time 
	  },
	  initPrice(){
	  	var price = this.selectMentor.topics[this.selectTag].price
	  	this.total = price * this.order_number
	  },
	  forceNumber(num){
	  	this.order_number = num
	  	
	  	this.initPrice()
	  },
	  selectTopic(item,index){
	  	this.selectTag = index
	  	this.initPrice()
	  },
	  subBtn(mentor){
	  	this.selectMentor = mentor
	  	this.show = true
	  	this.selectTag = 0
	  	this.order_number = 1
	  	
	  	this.initPrice()
	  },
	  initData(){
		  
		  var _t = this
		  uni.getLocation({
		  	success: function (res) {
		  		_t.searchParam.lat = res.latitude
		  		_t.searchParam.lng = res.longitude
		  		_t.selectData()
		  	},
		  	fail(err) {
		  		console.log(err)
		  		_t.selectData()
		  	},
		  });
	  },
	  selectData(){
		this.loading = true
		listObj(this.searchParam).then(res=>{
			  this.loading = false;
			  this.list = res.data.data
			  this.count = res.data.total
			  
			  this.title = (res.cate?.name || '') + "主理人"
		},err=>{
			this.loading = false;
			 console.log(err)
		})  
	  }
    }
  }
</script>

<style lang="scss" scoped>
	.bgDefault{
		height: 100vh;
		  background: $tn-main-bg;
		 .index_content{
			 padding: 0 7%;
		 }
	}
	.basic{
		font-family: "PingFangSCRegular";
		.submit-btn {
		  width: 100%;
		  background-color: $tn-main-orange;
		  color: #FFFFFF;
		  line-height: 105rpx;
		  font-size: 30rpx;
		  margin-top: 31rpx;
		}
	}
	.main_title{
		color: #FFFFFF;
		text-align: left;
		margin-top: 30rpx;
		font-size: 24rpx;
		font-weight: bold;
	}
	.mentor_title{color: $tn-main-orange;}
	.tn-radius10{border-radius: 10rpx;}
	.heightBig{height: 382rpx;}
	.heightSmall{height: 125rpx;background-size: contain;background-repeat: no-repeat;margin-bottom: 16rpx;}
	.right0{margin-right: 0;}
	.left0{margin-left: 0;}
	.top-tips{color: $tn-main-orange;font-size: 18rpx;margin-top: 18rpx;margin-bottom: 30rpx;letter-spacing: 1px;font-weight: bold;}
	.flex00{
	}
	.width-2{width: 47%;}
	
	.flex-2{
		justify-content: space-between;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
	}
	
	
	.search-box{
		height: 54rpx;
		width:100%; 
		background-color: #e5f3f9;
		//border:1px solid #FFF;
		border-radius: 27rpx;
		line-height: 54rpx;
		color: $tn-main-orange;
		font-size: 24rpx;
		padding: 0 10px;
		margin-top: 31rpx;
		.icon{
			font-size: 16px;
			margin-right: 5px;
			font-weight: bold;
		}
	}

  
  /* 内容容器 start */
  .bg-flex-shadow{
    background-color: #e2f1f9;
    z-index: 9999;
  }
  /* 内容容器 end */
  
  .mentor_list{
  	  background: #FFFFFF;
  	  border-radius: 10rpx;
  	  overflow: hidden;
  	  padding: 6rpx 5% 16rpx;
  	  float: unset;
  	  
  	  .logo{
  		  background: url("https://www.zztengma.com/lihu/bumang/images/mentor.png") no-repeat  ;
  		  background-size: contain;
  		  width: 15%;
  		  height: 100%;
  		  float: left;
  		  min-height: 161rpx;
  		  margin-top: 18rpx;
  	  }
  	  .right{
  		  float: right;
  		  margin-top: 18rpx;
  		  width: 83%;
  		  .title{
  			font-size: 28rpx;
  			color: #333;
  			font-weight: bold;
  			.title-tag{
  				width: auto!important;
  				margin-right: 10rpx;
  				background-color: $tn-main-orange;
  				color: #FFFFFF;
  				font-size: 20rpx;
  				border-radius: 8rpx;
  				padding: 1px 2px;
  				letter-spacing: 1px;
  			}
  		  }
  		  .list-tag{
  			  margin-top: 8rpx;
  			  font-size: 24rpx;
  			  background: #c7c7c7;
  			  border-radius: 10rpx;
  			  padding: 3rpx 11rpx;
  			  font-weight: bold;
  			  color: $tn-main-orange;
  			  width: max-content;
  		  }
  		  .en{font-size: 24rpx;color: #0a0a0a;font-weight: bold;margin-top: 8rpx;}
  		  .location{
  			  margin-top: 8rpx;
  			  font-size: 24rpx;
  			  font-family: "宋体";
  			  .icons{width: 20px;height: 20px;display: inline;margin-right: 7rpx;font-size: 24rpx;}
  			}
  		  .footer{
  			  margin-top: 8rpx;
  			  display: flex;justify-content: space-between;
  			  .price{color: $tn-main-orange;font-weight: bold;font-size: 26rpx;}
  			  .order-btn{background:$tn-main-orange;color: #FFFFFF;padding: 1px;margin-top: -18rpx;border-radius: 10rpx;font-size: 26rpx;font-weight: bold;}
  		  }
  	  }
  }
  
  /* 用户头像 start */
  .logo-image{
    width: 116rpx;
    height: 116rpx;
    position: relative;
  }
  .logo-pic{
    background-size: cover;
    background-repeat:no-repeat;
    // background-attachment:fixed;
    background-position:top;
    border-radius: 50%;
    overflow: hidden;
    background-color: #FFFFFF;
  }
  
  .rightImage{width: 32rpx;height: 20rpx;margin-right: 5rpx}
  
  .pop_content{
  	  background: #fff;border-top-right-radius: 10px;border-top-left-radius: 10px;margin-top: 18rpx;
  	  padding: 23rpx 30rpx;
  	  .pop_content_user{
  		  display: flex;
  		  justify-content: space-between;
  		  padding-bottom: 30rpx;
  		   border-bottom: 1px solid #c0c0c0;
  		  .alogo{width: 158rpx;height: 158rpx;border-radius:10px;  border:1px solid  $tn-main-orange;margin-right: 30rpx;}
  		  .alogoRight{width: 380rpx;font-size: 10px;color: #666;line-height: 23px;}
  	  }
  	}
  	.select_nickname{font-size: 14px;color: #333;}
  	.select_intro{font-size: 12px;color: #666}
  	.select_tag{
  		font-size: 10px;color: #666;line-height: 20rpx;
  		.rightTxt{
  			margin-right: 10rpx;
  			display: flex;
  			align-content: center;
  		}}
  		
  	.sprice{color: $tn-main-orange;font-size: 36rpx;font-weight: bold;}
  	.footer{
  		background: #fff;
  		padding: 20rpx;
  		color: #787777;font-size: 24rpx;
  		.btn{
  			background-color: $tn-main-orange;
  			color: #fff;
  			font-size: 36rpx;
  			padding: 10rpx 20rpx;
  			border-radius: 10px;
  		}
  	}
	
	.footer.mentor_footer{
		padding: 0;
		.order-btn{padding: 1px !important;margin-top: 0 !important;}
	}
  	
  	.pop_content_topic{
  		margin-top: 32rpx;
  		.tn-tag-class{margin-right: 26rpx;}
  		.tagSelected{border: 1px solid  $tn-main-orange;color:  $tn-main-orange;}
  	}
</style>
